<template>
    <BasicDrawer v-bind="$attrs" @register="registerDrawer" title="充电预警详情" width="1040px">
        <div class="content" v-if="awaitDate">
            <h1>{{ rowDate.warnId_dictText }} <a-tag :color="level[rowDate.level_dictText]">{{ rowDate.level_dictText
                    }}风险</a-tag></h1>
            <!-- {{ rowDate. }} -->
            <a-descriptions title="基础信息" layout="vertical" :column="4">
                <a-descriptions-item label="充电站编码">{{ rowDate.warnStation }} </a-descriptions-item>
                <a-descriptions-item label="充电站名称">{{ rowDate.warnStation_dictText }} </a-descriptions-item>
                <a-descriptions-item label="所属城市">{{ rowDate.bizChargeStation.address }}</a-descriptions-item>
                <a-descriptions-item label="所属运营商" :span="2">
                    {{ rowDate.operatorid_dictText }}
                </a-descriptions-item>
            </a-descriptions>
            <div class="main">
                <div class="mainleft">
                    <img src="/@/assets/images/station/u336.png" alt="">
                    <div class="imgr">
                        <p> {{ rowDate.warnStakeId }}</p>
                        <p><span>{{ rowDate.bizChargeStake?.name }}</span> <a-tag color="#2db7f5">{{
                            rowDate.bizChargeStake?.poleType == 0 ? '交流' : '直流' }}</a-tag></p>
                        <p><img src="/@/assets/images/station/u348.png" alt="">额定功率
                            <span>{{ rowDate.bizChargeStake?.ratedPower }}kW</span>
                        </p>
                        <p><img src="/@/assets/images/station/u342.png" alt="">输出电压
                            <span>DC{{ rowDate.bizChargeStake?.minOutputVoltage }}~{{
                                rowDate.bizChargeStake?.maxOutputVoltage }}V</span>
                        </p>
                        <p><img src="/@/assets/images/station/u345.png" alt="">输出电流
                            <span>{{ rowDate.bizChargeStake?.minOutputVoltage }}~{{
                                rowDate.bizChargeStake?.maxOutputCurrent }}A</span>
                        </p>
                    </div>
                </div>
                <div class="mainright">
                    <div class="mainrightonse" v-for="(item, index) in rowDate.remarks" :key="index">
                        <a-space :size="5" align="center"> <span class="badge"
                                :style="{ 'background': bagcolor[index] }"></span>
                            <span>{{ Object.keys(item)[0] }}</span>
                        </a-space>
                        <p>{{ item[Object.keys(item)[0]] }}</p>
                    </div>
                    <!-- <div class="mainrightonse">
            <a-space align="center"> <span class="badge" style="background: #31ce2f;"> </span>
              充电机输出电流（A）</a-space>
            <p>59.4??</p>
          </div>
          <div class="mainrightonse">
            <a-space align="center"> <span class="badge" style="background:#30e8bb ;"></span>
              充电机输出电流（A）</a-space>
            <p>59.4??</p>
          </div> -->

                </div>
            </div>
            <!-- <a-descriptions title="充电过程曲线" layout="vertical"> -->
            <!-- <SingleLine :chartData="barDataSource" height="50vh" :option="{ title: { text: '充电过程曲线?', left: 'left' } }">
            </SingleLine> -->
            <!-- <lylineEts></lylineEts> -->
            <!-- </a-descriptions> -->
        </div>

    </BasicDrawer>

</template>
<script lang="ts" setup>
import { BasicDrawer, useDrawerInner } from '/src/components/Drawer';
// import lylineEts from '/@/components/chart/lylineEts.vue';

/**
 * 数据
 */
const awaitDate = ref(false);
const bagcolor = ref(['#31ce2f', '#30e8bb', '#1890ff']);
const level = ref({
    高: '#f5222d',
    中: '#faad14',
    低: '#13c2c2',
});
const rowDate = ref({});
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
    console.log('BasicDrawer数据数据数据data', data);
    awaitDate.value = true;
    rowDate.value = data;
});
</script>
<style lang="less" scoped>
.bacgclass1 {}

.content {
    box-sizing: border-box;
    padding: 0 20px;

    .main {
        display: flex;

        .mainleft {
            display: flex;
            align-items: center;

            img {
                width: 55px;
                height: 190px;
            }

            .imgr {
                margin-left: 10px;

                img {
                    width: 16px;
                    height: 16px;
                    margin-right: 5px;
                }

                p {
                    font-size: 12px;
                    color: #999;

                    &:nth-child(2) {
                        margin-top: 10px;
                    }
                }

                p:nth-of-type(1) {
                    font-weight: 400;
                    font-style: normal;
                    font-size: 16px;
                    color: rgb(0, 0, 0);
                }

                p:nth-of-type(2) {
                    span:nth-of-type(1) {
                        font-weight: 400;
                        font-style: normal;
                        font-size: 16px;
                        color: black;
                        margin-right: 5px;
                    }
                }
            }
        }

        .mainright {
            margin-left: 60px;
            display: flex;
            justify-content: space-between;
            flex: 1;
            align-items: center;

            .mainrightonse {
                font-size: 14px;

                .badge {
                    border-radius: 50%;
                    display: inline-block;
                    width: 15px;
                    height: 15px;
                }

                text-align: center;

                p {
                    font-size: 28px;
                    color: #000;
                    margin-bottom: 0px;
                }
            }
        }
    }
}
</style>
